<template>
    <div class="wrapper corner">
        <h4>{{ title }}</h4>
        <div class="in-wrap">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'wrapper',
    props: ['title'],
    data() {
        return {}
    }
}
</script>

<style lang="scss" scoped>
.wrapper {
    max-width: 300px;
    padding: 10px;
    margin: 10px;

    h4 {
        background: url(../assets/bgs/title_bg.png);
        background-repeat: no-repeat;
        margin: 5px 0;
        box-sizing: border-box;
        padding-left: 75px;
        color: #29e2fc;
        line-height: 28px;
        height: 30px;
    }

    .in-wrap {
        box-sizing: border-box;
        margin: 0 10px 10px 20px;
        color: #eee;
    }
}

.corner {
    --corner-color: #29e2fc;
    --corner-width: 0.2rem;
    --corner-size: 0.8rem;
    --corner-radius: 0;
    --corner-bg: rgba(255, 255, 255, 0.15);
    background: linear-gradient(to left, var(--corner-color), var(--corner-color)) left top no-repeat,
        linear-gradient(to bottom, var(--corner-color), var(--corner-color)) left top no-repeat,
        linear-gradient(to left, var(--corner-color), var(--corner-color)) right top no-repeat,
        linear-gradient(to bottom, var(--corner-color), var(--corner-color)) right top no-repeat,
        linear-gradient(to left, var(--corner-color), var(--corner-color)) left bottom no-repeat,
        linear-gradient(to bottom, var(--corner-color), var(--corner-color)) left bottom no-repeat,
        linear-gradient(to left, var(--corner-color), var(--corner-color)) right bottom no-repeat,
        linear-gradient(to left, var(--corner-color), var(--corner-color)) right bottom no-repeat;
    background-size: var(--corner-width) var(--corner-size), var(--corner-size) var(--corner-width), var(--corner-width) var(--corner-size), var(--corner-size) var(--corner-width);
    background-color: var(--corner-bg);
    border-radius: var(--corner-radius);
}
</style>